<template>
  <div class="components-container">
    <aside>{{ $t("components.backToTopTips1") }}</aside>
    <aside>{{ $t("components.backToTopTips2") }}</aside>
    <div class="placeholder-container">
      <div v-for="i in lenmax" :key="i">placeholder</div>
    </div>
    <el-tooltip placement="top" content="tooltip">
      <back-to-top
        :custom-style="myBackToTopStyle"
        :visibility-height="300"
        :back-position="50"
        transition-name="fade"
      />
    </el-tooltip>
  </div>
</template>

<script>
import BackToTop from "@/components/BackToTop";

export default {
  name: "BackToTopDemo",
  components: { BackToTop },
  data() {
    return {
      myBackToTopStyle: {
        right: "50px",
        bottom: "50px",
        width: "40px",
        height: "40px",
        "border-radius": "4px",
        "line-height": "45px",
        background: "#e7eaf1",
      },
      lenmax: 100,
    };
  },
};
</script>

<style scoped>
.placeholder-container div {
  margin: 10px;
}
</style>